<form class="modal hide fade form-horizontal" id="modal-create">
    <div class="modal-header">
        <h5></h5>
    </div>
    <div class="modal-body text-center" style="overflow:visible;">
        <h3></h3>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="create-class-modal">创建类</button>
            <button class="btn btn-primary" data-dismiss="modal" id="create-relation-modal">创建关系</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>

<form class="modal hide fade form-horizontal" id="modal-create-class">
    <div class="modal-header">
        <h5>创建“类”</h5>
    </div>
    <div class="modal-body" style="overflow:visible;">
        <label class="control-label-small controls-small" >类名</label>
        <input type="text" class="search-class" style="margin-left: 10px" data-provide="typeahead" data-items="10" autocomplete="off">
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="create-class">创建类</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>


<form class="modal hide fade form-horizontal" id="modal-create-relation">
    <div class="modal-header">
        <h5>创建“类之间的关系”</h5>
    </div>
    <div class="modal-body" style="overflow:visible;">
        <div>
            <label class="control-label-small controls-small" >Class1</label>
            <input type="text" class="span2 search-relation input-1" style="margin-left: 10px" data-provide="typeahead" data-items="10" autocomplete="off">
        </div>
        <div>
            <label class="control-label-small controls-small" >Class2</label>
            <input type="text" class="span2 search-relation input-2" style="margin-left: 10px" data-provide="typeahead" data-items="10" autocomplete="off">
        </div>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="create-relation">创建关系</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>

<form class="modal hide fade form-horizontal" id="modal-create-attribute">
    <div class="modal-header">
        <h5>创建“属性”</h5>
    </div>
    <div class="modal-body" style="overflow:visible;">
        <label class="control-label-small controls-small" >属性名</label>
        <input type="text" class="search-attribute" style="margin-left: 10px" data-provide="typeahead" data-items="10" autocomplete="off">
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="create-attribute">创建属性</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>

<form class="modal hide fade form-horizontal" id="modal-attribute-add">
    <div class="modal-header">
        <h5>创建“属性”</h5>
    </div>
    <div class="modal-body" style="overflow:visible;">
        <div class="btn-group controls-small">
            <button class="btn dropdown-toggle" data-toggle="dropdown">选择类型 <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <!--li value="name"><a href="javascript:;">名称</a></li>
                <li value="type"><a href="javascript:;">类型</a></li>
                <li value="multiplicity"><a href="javascript:;">多重性</a></li>
                <li value="visibility"><a href="javascript:;">可见性</a></li>
                <li value="default"><a href="javascript:;">默认值</a></li>
                <li value="propertyStrings"><a href="javascript:;">属性性质</a></li>
                <li value="constraint"><a href="javascript:;">约束</a></li-->
            </ul>
        </div>
        <input type="text" class="search-attributeElem" style="margin-left: 10px" data-provide="typeahead" data-items="10" autocomplete="off">
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="attribute-add">属性添加元素</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>


<form class="modal hide fade form-horizontal" id="modal-alert-content">
    <div class="modal-body text-center" style="overflow:visible;">
        <h5></h5>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="delete-content">确定</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>

<form class="modal hide fade form-horizontal" id="modal-alert-element">
    <div class="modal-body text-center" style="overflow:visible;">
        <h5></h5>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="btn btn-primary" data-dismiss="modal" id="delete-element">确定</button>
            <button class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</form>

<form class="modal hide fade form-horizontal" id="modal-source-detail">
    <div class="modal-header">
        <h5></h5>
    </div>
    <div class="modal-body" style="overflow:visible;">
        <label class="control-label-small controls-small"></label>
        <input type="text" class="search-source" style="margin-left: 10px" data-provide="typeahead" data-items="10" autocomplete="off">

        <span class="add-on" title="刷新数据" style="padding-left: 20px"><i class="icon-refresh source"></i></span>
        <span class="add-on" data-dismiss="modal" title="确定" style="padding-left: 10px"><i class="icon-ok source"></i></span>
        <span class="add-on" data-dismiss="modal" title="返回" style="padding-left: 10px"><i class="icon-share-alt source"></i></span>
        <hr/>
        <div class="detail-info" >
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function(){
        $(".search-class").typeahead({
            source:function(query, process){
                var search_class = getSource(icd['class'],ccd['class']);
                process(search_class);
            }
       });

        $('.search-relation.input-1').typeahead({
            source:function(query, process){
                var search_relation = getSource(icd['relation'],ccd['relation']);
                var search_relation1 = [];
                var split;
                var json = {};
                for(var i=0;i<search_relation.length;i++){
                    split=search_relation[i].split("-");
                    if(json[split[0]] === undefined){
                        json[split[0]] = 1;
                        search_relation1.push(split[0]);
                    }
                }
                process(search_relation1);
            }
        });

        $('.search-relation.input-2').typeahead({
            source:function(query, process){
                var search_relation = getSource(icd['relation'],ccd['relation']);
                var search_relation2 = [];
                var split;
                var json={};
                for(var i=0;i<search_relation.length;i++){
                    split=search_relation[i].split("-");
                    if(json[split[1]] === undefined){
                        json[split[1]] = 1;
                        search_relation2.push(split[1]);
                    }
                }
                process(search_relation2);
            }
        });

        $(".search-attribute").typeahead({
            source:function(query, process){
                var search_attribute=getSource(icd['class'][statusArray['class']],ccd['class'][statusArray['class']]);
                process(search_attribute);
            }
        });

        $(".search-attributeElem").typeahead({
            source:function(query, process){
                var attributeElem = $("#modal-attribute-add").find(".modal-body").children(".btn-group").children("button").text();
                attributeElem = chToEn[attributeElem];
                var search_attributeElem=getSource(icd['class'][statusArray['class']][statusArray['attribute']][attributeElem],ccd['class'][statusArray['class']][statusArray['attribute']][attributeElem]);
                process(search_attributeElem);
            }
        });

        $(".search-source").typeahead({
            source:function(query, process){
                var label = $("#modal-source-detail").children(".modal-body").children("label").text();
                switch(label){
                    case "类":
                        var source=getSource(null,ccd['class']);
                        break;
                    case "属性":
                        var source=getSource(null,ccd['class'][statusArray['class']]);
                        break;
                }
                process(source);
            }
        });

    });
</script>
